<template>
  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增菜单' : '编辑菜单'" width="580px">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" :show-message="false" label-width="90px">
      <el-form-item label="菜单类型">
        <el-radio-group v-model="form.type" size="mini" style="width: 440px" @change="typeChange">
          <el-radio-button label="目录">目录</el-radio-button>
          <el-radio-button label="菜单">菜单</el-radio-button>
          <el-radio-button label="按钮">按钮</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.type.toString() !== '按钮'" label="菜单图标" prop="icon">
        <el-popover
          placement="bottom-start"
          width="440"
          trigger="click"
          @show="$refs['iconSelect'].reset()"
        >
          <IconSelect ref="iconSelect" @selected="selected" />
          <el-input slot="reference" v-model="form.icon" style="width: 440px;" placeholder="点击选择图标" readonly>
            <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
            <i v-else slot="prefix" class="el-icon-search el-input__icon" />
          </el-input>
        </el-popover>
      </el-form-item>
      <el-form-item v-if="form.type.toString() === '目录'" label="顶级目录">
        <el-radio-group v-model="isTop" size="mini" @change="isTopChange">
          <el-radio-button label="true">是</el-radio-button>
          <el-radio-button label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.type.toString() !== '按钮'" label="菜单缓存" prop="cache">
        <el-radio-group v-model="form.cache" size="mini">
          <el-radio-button label="true">是</el-radio-button>
          <el-radio-button label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.type.toString() !== '按钮'" label="菜单可见" prop="hidden">
        <el-radio-group v-model="form.hidden" size="mini">
          <el-radio-button label="false">是</el-radio-button>
          <el-radio-button label="true">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标题" prop="title" required>
        <el-input v-model="form.title" :style=" 'width: 168px'" placeholder="菜单标题" />
      </el-form-item>
      <el-form-item v-if="form.type.toString() !== '按钮'" label="路由地址" prop="path" required>
        <el-input v-model="form.path" placeholder="路由地址" style="width: 168px;" />
      </el-form-item>
      <el-form-item v-if="form.type.toString() !== '目录' || isTop === 'false'" label="编码" prop="code" required>
        <el-input v-model="form.code" style="width: 168px;" :placeholder="form.type === '按钮'?'按钮编码':'匹配组件内Name字段'" />
      </el-form-item>
      <el-form-item v-if="(form.type.toString() === '目录' && isTop === 'false')|| form.type.toString() === '菜单'" label="组件路径" prop="component" required>
        <el-input v-model="form.component" style="width: 168px;" placeholder="组件路径" />
      </el-form-item>
      <el-form-item v-if="form.type.toString() === '目录'" label="重定向" prop="redirect">
        <el-input v-model="form.redirect" style="width: 168px;" placeholder="点击面包屑跳转地址" />
      </el-form-item>
      <el-form-item v-if="form.type.toString() !== '按钮'" label="菜单排序" prop="sort">
        <el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 168px;" />
      </el-form-item>
      <el-form-item v-if="form.type.toString() !== '目录' || isTop === 'false'" label="上级类目" prop="parentId" required>
        <treeselect
          v-model="form.parentId"
          :load-options="getMenus"
          :normalizer="normalizer"
          :options="menus"
          style="width: 440px;"
          placeholder="选择上级类目"
          no-options-text="无数据"
        />
      </el-form-item>

      <el-form-item v-if="form.type.toString() !== '目录' && apiGetPath.length===0" label="Get接口" prop="apiGetPath">
        <el-button type="text" @click="addApiPath('get')">新增</el-button>
      </el-form-item>

      <el-form-item v-if="form.type.toString() !== '目录' && apiPutPath.length===0" label="Put接口" prop="apiPutPath">
        <el-button type="text" @click="addApiPath('put')">新增</el-button>
      </el-form-item>

      <el-form-item v-if="form.type.toString() !== '目录' && apiPostPath.length===0" label="Post接口" prop="apiPostPath">
        <el-button type="text" @click="addApiPath('post')">新增</el-button>
      </el-form-item>

      <el-form-item v-if="form.type.toString() !== '目录' && apiDeletePath.length===0" label="Delete接口" prop="apiDeletePath">
        <el-button type="text" @click="addApiPath('delete')">新增</el-button>
      </el-form-item>

      <el-form-item v-if="form.type.toString() !== '目录' && apiGetPath.length>0" label="Get接口" prop="apiGetPath">
        <div v-for="(item,index) in apiGetPath" :key="index">
          <el-input v-model="apiGetPath[index]" placeholder="请输入接口路径" style="width: 410px;" />
          <el-button type="text" style="color:#8a8a8a" @click="removeApiPath(index,'get')">删除</el-button>
        </div>
        <el-button type="text" @click="addApiPath('get')">新增</el-button>
      </el-form-item>

      <el-form-item v-if="form.type.toString() !== '目录'&& apiPutPath.length>0" label="Put接口" prop="apiPutPath">
        <div v-for="(item,index) in apiPutPath" :key="index">
          <el-input v-model="apiPutPath[index]" placeholder="请输入接口路径" style="width: 410px;" />
          <el-button type="text" style="color:#8a8a8a" @click="removeApiPath(index,'put')">删除</el-button>
        </div>
        <el-button type="text" @click="addApiPath('put')">新增</el-button>
      </el-form-item>

      <el-form-item v-if="form.type.toString() !== '目录' && apiPostPath.length>0" label="Post接口" prop="apiPostPath">
        <div v-for="(item,index) in apiPostPath" :key="index">
          <el-input v-model="apiPostPath[index]" placeholder="请输入接口路径" style="width: 410px;" />
          <el-button type="text" style="color:#8a8a8a" @click="removeApiPath(index,'post')">删除</el-button>
        </div>
        <el-button type="text" @click="addApiPath('post')">新增</el-button>
      </el-form-item>

      <el-form-item v-if="form.type.toString() !== '目录' && apiDeletePath.length>0" label="Delete接口" prop="apiDeletePath">
        <div v-for="(item,index) in apiDeletePath " :key="index">
          <el-input v-model="apiDeletePath[index]" placeholder="请输入接口路径" style="width: 410px;" />
          <el-button type="text" style="color:#8a8a8a" @click="removeApiPath(index,'delete')">删除</el-button>
        </div>
        <el-button type="text" @click="addApiPath('delete')">新增</el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMenuOption, addMenu, editMenu } from '@/api/system/menu'
import IconSelect from '@/components/IconSelect'
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { IconSelect, Treeselect },
  props: {
    isAdd: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      menus: null,
      isTop: true,
      form: { type: '目录', icon: '', cache: false, hidden: false, title: '', path: '', redirect: 'noRedirect', sort: 999 },
      apiGetPath: [], apiPutPath: [], apiPostPath: [], apiDeletePath: [],
      rules: {
      },
      normalizer(node) {
        // 去掉children为空的children属性
        if (!node.children || (node.children && !node.children.length)) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.title,
          children: node.children
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    isTopChange(isTop) {
      if (isTop) {
        this.form.component && delete this.form.component
        this.form.code && delete this.form.code
      } else {
        this.form.component = ''
        this.form.code = ''
      }
    },
    typeChange(type) {
      switch (type) {
        case '目录':
          this.isTop = true
          this.form = { type: '目录', icon: '', cache: false, hidden: false, title: '', path: '', redirect: 'noRedirect', sort: 999, parentId: 0 }
          break
        case '菜单':
          this.form = { type: '菜单', icon: '', cache: false, hidden: false, title: '', path: '', code: '', component: '', sort: 999, parentId: 0 }
          break
        case '按钮':
          this.form = { type: '按钮', title: '', code: '', parentId: 0 }
          break
      }
      this.clearApiPath()

      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    addApiPath(method) {
      switch (method) {
        case 'get':
          this.apiGetPath.push('')
          break
        case 'put':
          this.apiPutPath.push('')
          break
        case 'post':
          this.apiPostPath.push('')
          break
        case 'delete':
          this.apiDeletePath.push('')
          break
      }
    },
    removeApiPath(index, method) {
      switch (method) {
        case 'get':
          this.apiGetPath.splice(index, 1)
          break
        case 'put':
          this.apiPutPath.splice(index, 1)
          break
        case 'post':
          this.apiPostPath.splice(index, 1)
          break
        case 'delete':
          this.apiDeletePath.splice(index, 1)
          break
      }
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.isAdd) {
            this.doAdd()
          } else {
            this.doEdit()
          }
        } else {
          return false
        }
      })
    },
    doAdd() {
      this.initFormApiPath()
      addMenu(this.form).then(res => {
        this.resetForm()
        this.$notify({ title: '添加成功', type: 'success', duration: 2500 })
        this.$parent.loadData()
      }).finally(() => {
        this.loading = false
      })
    },
    doEdit() {
      this.initFormApiPath()
      editMenu(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.$parent.loadData()
      }).finally(() => {
        this.loading = false
      })
    },
    resetForm() {
      this.dialog = false
      this.isTop = true
      this.form = { type: '目录', icon: '', cache: false, hidden: false, title: '', path: '', redirect: 'noRedirect', sort: 999, parentId: 0 }

      this.clearApiPath()
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    selected(name) {
      this.form.icon = name
    },
    async getMenus({ action }) {
      if (action === LOAD_ROOT_OPTIONS) {
        await getMenuOption().then(res => {
          this.menus = []
          const menu = { id: 0, title: '顶级类目', children: [] }
          menu.children = res.data
          this.menus.push(menu)
        })
      }
    },
    clearApiPath() {
      this.apiGetPath = []
      this.apiPutPath = []
      this.apiPostPath = []
      this.apiDeletePath = []
    },
    initFormApiPath() {
      this.form.apiGetPath = this.apiGetPath
      this.form.apiPutPath = this.apiPutPath
      this.form.apiPostPath = this.apiPostPath
      this.form.apiDeletePath = this.apiDeletePath
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
